/* 
------------------------------------
  uPortal Gallery.
------------------------------------ 
 * The gallery is a sliding drawer that provides interfaces for customizing the protal.
 */

.up {
	.up-gallery {
		 background: $galleryBackground;
		 border: $galleryBorder;
		 
		 .handle {
	 		/* Clickable handle that opens the drawer. Once open, the handle can be clicked to close the drawer. */
	 		background:$galleryHandleBackground;
	 		
	 		a {
	 			background:$galleryHandleLinkBackround;
	 			color: $galleryHandleLink;
	 			border: $galleryHandleBorder;
	 			border-top: none;
	 			@if ($galleryHandleRound != false) {
	 				@include round(0,0,$galleryHandleRound,$galleryHandleRound);
	 			}
	 			@if ($galleryHandleShadow != false) {
	 				@include box-shadow($galleryHandleShadow);
	 			}
	 			
	 			span {
	 				background-image: $galleryHandleIconClosed;
	 				background-position: right center;
	 				background-repeat: no-repeat;
	 			}
	 		}
	 		.handle-arrow-up {background-image: $galleryHandleIconOpen;}
	 	}
		 
		.gallery-inner {
		 	background: $galleryBarBackground;
		 	
		 	.menu-wrapper{
		 		/* The navigation menu of gallery views. */
			 	.menu {
			 		border: $galleryMenuBorder;
			 		background: $galleryMenuBackground;
			 		
			 		li {
			 			border: $galleryMenuItemBorder;
			 			background: $galleryMenuItemBackground;
			 			
			 			a {
			 				color: $galleryMenuItemLink;
			 			}
			 		}
			 		li:hover, li:active {
			 			background: $galleryMenuItemBackgroundHover;
			 			
			 			a {
			 				color: $galleryMenuItemLinkHover;
			 			}
			 		}
			 		.active {
			 			background: $galleryMenuItemActiveBackground;
			 			
			 			a {
			 				color: $galleryMenuItemActiveLink;
			 			}
			 			
			 			span {
			 				background: $galleryMenuItemActiveIcon;
			 			}
			 		}
			 		
			 	}
		 	}
		 	
		 	.content-filters-wrapper {
		 		/* Search and category filters for the add portlet and use portlet views. */
		 		background: $galleryFilterBackground;
		 		border: $galleryFilterBorder;
		 		@if ($galleryFilterRound != false) {
		 			@include rounded($galleryFilterRound);
		 		}
		 		
	 			h3 {
	 				/* Filter titles */
	 				background: $galleryFilterTitleBackground;
	 				color: $galleryFilterTitle;
	 				@if ($galleryFilterTitleRound != false) {
			 			@include round($galleryFilterTitleRound, $galleryFilterTitleRound, 0, 0);
			 			
			 			span {
			 				@include round($galleryFilterTitleRound, $galleryFilterTitleRound, 0, 0);
			 			}
			 		}
	 			}
	 			
	 			h3:hover, h3:focus {
	 				color: $galleryFilterTitleHover;
	 			}
		 		
		 		.active h3 {
		 			span {
		 				background: $galleryFilterTitleActiveBgd;
		 				color: $galleryFilterTitleActive;
		 			}
		 		}
		 		
		 		.active h3:hover, .active h3:focus {
		 			color: $galleryFilterTitleActiveHover;
		 		}
		 		
		 		h4 {
		 			/* Filter subtitles */
		 			color: $galleryFilterSubtitle;
		 			border-bottom: $galleryFilterSubtitleLine;
		 		}
		 		
		 		.portlet-search-input {
		 			/* Filter search */
		 			background: $galleryFSearchInputBackground;
		 			color: $galleryFSearchInputText;
		 			padding: $galleryFSearchInputPadding;
		 			&:hover {
		 				background: $galleryFSearchInputHover;
		 			}
		 			&:focus {
			 			background: $galleryFSearchInputFocus;
			 		}
		 		}
		 		
		 		.categories {
		 			/* Filter categories */
		 			a {
		 				color: $galleryCatLink;
		 			}
		 			
		 			a:hover, a:focus {
		 				color: $galleryCatLinkHover;
		 			}
		 			
		 			.active a {
		 				color: $galleryCatActiveLink;
		 			}
		 		}
		 		
		 		
		 		.packages-wrapper {
		 			/* Filter packages */
		 			color: $galleryPackagesText;
		 		}
		 	}
		 	
		 	.results-wrapper {
		 		/* Results section of the gallery. Lists portlets, packages, skins, or layout options. */
		 		padding-bottom: $galleryResultsBottomPadding;
		 		color: $galleryResultsText;
		 		
		 		.layout-wrapper .ri-link,
		 		.skins-wrapper .ri-link,
		 		.portlet.result-item,
		 		.package.results-item {
		 		  background: $galleryRIBackground;
		 			border: $galleryRIBorder;
		 			@if ($galleryRIRound != false) {
		 				@include rounded($galleryRIRound);
		 			}
		 			@if ($galleryRIShadow != false) {
		 				@include box-shadow($galleryRIShadow);
		 			}
		 			&:hover,
  		 		&:focus,
  		 		&:active {
  		 			background: $galleryRIBackgroundHover;
  		 			border: $galleryRIBorderHover;
  		 			@include gradient($galleryRIGradient1Hover,$galleryRIGradient2Hover);
  		 		}
		 		}
		 		.layout-wrapper, .skins-wrapper {
		 		  .ri-link {

  		 		}

		 		}
		 		.results-item.disabled {
          @include opacity(20);
          border-color: #3A3A3A !important;

          &:hover, &:focus,
          a:hover, a:focus {
            background: none !important;
            cursor: default !important;
          }
        }
        .results-item.selected .ri-link {
	 				background: $galleryRISelectedBackground;
	 				border-width: $galleryRISelectedBorderWidth;
	 				border-style: $galleryRISelectedBorderStyle;
	 				border-color: $galleryRISelectedBorderColor;
	 				margin-bottom: -#{$galleryRISelectedBorderWidth * 2};
	 			}
		 		
		 		.ri-wrapper {
		 			.ri-utility {
		 				height: $galleryRIUtilityHeight;
		 				background: $galleryRIUtilityBackground;
		 				@if ($galleryRIUtilityRound != false) {
		 					@include round($galleryRIUtilityRound,$galleryRIUtilityRound,0,0);
		 				}
		 			}
		 			
		 			.portlet-thumb-gripper {
		 				background: $galleryRIGripper;
		 			}
		 			
		 			.ri-titlebar {
		 				color: $galleryRITitle;
		 			}
		 			
		 			.ri-description {
		 				color: $galleryRIDescription;
		 			}
		 		}
        
        .portlet-wrapper, .package-wrapper {
		 			.ri-link {
		 				color: $galleryRILink;
		 				background: $galleryRIBackground;
		 				@if ($galleryRILinkGradient1 != false) {
		 					@include gradient($galleryRILinkGradient1,$galleryRILinkGradient2);
		 				}
		 				@if ($galleryRILinkRound != false) {
		 					@include round(0,$galleryRILinkRound,0,0);
		 				}
		 				
		 				display: none;
		 			}
		 		}
		 		.portlet-wrapper:hover, .portlet-wrapper:focus, .package-wrapper:hover, .package-wrapper:focus {
		 			.ri-link {
		 				background: $galleryRILinkBackgroundHover;
		 				@if ($galleryRILinkGradient1Hover != false) {
		 					@include gradient($galleryRILinkGradient1Hover,$galleryRILinkGradient2Hover);
		 				}
		 				
		 				display: block;
		 			}
	 			}
	 			
	 			.pager {
	 				.pager-pagination {
	 					color: $galleryPagerText;
	 				}
	 				.pager-button-up, .pager-button-down {
	 					background: $galleryPagerButtonBackground;
	 					border: $galleryPagerButtonBorder;
	 					@if ($galleryPagerButtonGradient1 != false) {
	 						@include gradient($galleryPagerButtonGradient1,$galleryPagerButtonGradient2);
	 					}
	 					@if ($galleryPagerButtonRound != false) {
	 						@include rounded($galleryPagerButtonRound);
	 					}
	 				}
	 				.pager-button-up:hover, .pager-button-up:focus, .pager-button-down:hover, .pager-button-down:focus {
						background: $galleryPagerBtnBackgroundHover;
						border: $galleryPagerBtnBorderHover;
						@if ($galleryPagerBtnGradient1Hover != false) {
							@include gradient($galleryPagerBtnGradient1Hover,$galleryPagerBtnGradient2Hover);
						}
						
					}
					.fl-pager-disabled {
						background: $galleryPagerBtnBgdDisabled;
						border: $galleryPagerBtnBorderDisabled;
						cursor: default !important;
						a {
							cursor: default !important;
						}
					}
	 			}
		 	}
		 	
		}
	} 
}